<template>
  <div>
      
      <div class="con">
    <div class="head">
         <div class="head-center">
            <ul>
                <li><span><img src="" alt=""></span></li>
                <li @click="login()">点击登录</li>
               
            </ul>

        </div>
        <div class="head-top">
            <ul>
                <li><a href="#"><span class="iconfont icon-shezhi iconfont2"></span></a></li>
                <li><a href="#"><span class="iconfont icon-kefu iconfont2"></span></a></li>
            </ul>
        </div>
       
        <div class="head-bottom">
          
           <Myselftab :arr="arr"/>
        </div>
    </div>
    
        <div class="nav">
        <div class="nav-top">
            <span>我的订单</span>
            <span>查看全部订单&nbsp;&nbsp;></span>
        </div>
        <div class="nav-bot">
            <Myselftab :arr="arr1" color="black"/>
        </div>
    </div>

    <div class="money">
        <div class="money-top">
            <span>我的钱包</span>
            <span>进入钱包&nbsp;&nbsp;></span>
        </div>
        <div class="money-bot">
            <ul>
                <li>
                    <h2>5元</h2>
                    <h3>新人福利</h3>
                    <span>最低可领</span>
                </li>
                <li> <h2>5元</h2>
                    <h3>新人福利</h3>
                    <span>最低可领</span></li>
                <li> <h2>5元</h2>
                    <h3>新人福利</h3>
                    <span>最低可领</span></li>
                <li><h2>5元</h2>
                    <h3>新人福利</h3>
                    <span>最低可领</span></li>
                <li><h2>5元</h2>
                    <h3>新人福利</h3>
                    <span>最低可领</span></li>
            </ul>
        </div>
        
    </div>
     <div class="img-1">
            <img src="img/myself.png" alt="">
    </div>
        
    <div class="game">
        <div class="nav-top">
            <span>我的游戏</span>
           
        </div>
        <div class="game-bot">
            <Myselfnav :arr="arr3"/>
        </div>
    </div>
    <div class="game">
        <div class="nav-top">
            <span>推荐工具</span>
           
        </div>
        <div class="game-bot">
            <Myselfnav :arr="arr3"/>
        </div>
    </div>
    <div class="myself-list">
        <div class="nav-top">
            <span>推荐工具</span>
           
        </div>
        <Myselflist :arr="arr4"/>
    </div>
    </div>
  </div>
</template>
<script>
import Myselftab from "@/compents/myselftab.vue";
import Myselfnav from "@/compents/myselfnav.vue";
import Myselflist from "@/compents/myselflist.vue";





export default {
components:{
    Myselftab,
    Myselfnav,
    Myselflist



},data(){
    return {
        arr:[{icon:"icon-gouwuche",name:"购物车",link:"/shop"},
        {icon:"icon-shoucang",name:"收藏",link:"/shop"},
        {icon:"icon-zuji",name:"足迹",link:"/shop"},
        {icon:"icon-kabao",name:"红包卡劵",link:"/shop"}],
        arr1:[{icon:"icon-daifukuan-copy",name:"待付款",link:"/others/dfk"},
        {icon:"icon-daishouhuo",name:"待收货",link:"/others/dsh"},
        {icon:"icon-daishiyong",name:"待使用",link:"/others/dsy"},
        {icon:"icon-pingjia",name:"待评价",link:"/others/dpj"},
        {icon:"icon--mine-tuikuanshouhou",name:"退款/售后",link:"/others/sh"}],
        arr3:[{img:"img/myselfnav1.png",title:"斗地主"},
        {img:"img/myselfnav2.png",title:"斗地主"},
        {img:"img/myselfnav3.png",title:"天天领现金"},
        {img:"img/myselfnav4.png",title:"签到领红包"},
        {img:"img/myselfnav5.png",title:"一份领红包"},
        {img:"img/myselfnav6.png",title:"斗地主"},
        {img:"img/myselfnav7.png",title:"斗地主"},
        {img:"img/myselfnav8.png",title:"斗地主"},
        {img:"img/myselfnav9.png",title:"斗地主"},],
        arr4:[{titleimg:"img/myselfnav9.png",title:"美团优选福利",type1:"美团优选",type2:"便宜有好货",conimg:"img/myself.png",iconimg1:"img/myselfnav8.png",iconimg2:"img/myselfnav7.png",icon1:"邀请好友",icon2:"天天拼团"},{titleimg:"img/myselfnav9.png",title:"美团优选福利",type1:"美团优选",type2:"便宜有好货",conimg:"img/myself.png",iconimg1:"img/myselfnav8.png",iconimg2:"img/myselfnav7.png",icon1:"邀请好友",icon2:"天天拼团"},{titleimg:"img/myselfnav9.png",title:"美团优选福利",type1:"美团优选",type2:"便宜有好货",conimg:"img/myself.png",iconimg1:"img/myselfnav8.png",iconimg2:"img/myselfnav7.png",icon1:"邀请好友",icon2:"天天拼团"},{titleimg:"img/myselfnav9.png",title:"美团优选福利",type1:"美团优选",type2:"便宜有好货",conimg:"img/myself.png",iconimg1:"img/myselfnav8.png",iconimg2:"img/myselfnav7.png",icon1:"邀请好友",icon2:"天天拼团"},{titleimg:"img/myselfnav9.png",title:"美团优选福利",type1:"美团优选",type2:"便宜有好货",conimg:"img/myself.png",iconimg1:"img/myselfnav8.png",iconimg2:"img/myselfnav7.png",icon1:"邀请好友",icon2:"天天拼团"},{titleimg:"img/myselfnav9.png",title:"美团优选福利",type1:"美团优选",type2:"便宜有好货",conimg:"img/myself.png",iconimg1:"img/myselfnav8.png",iconimg2:"img/myselfnav7.png",icon1:"邀请好友",icon2:"天天拼团"}]
    }
},
methods:{
    login(){
        this.$router.push("/login")
    }
}
}
</script>

<style scoped>
/* 头部 */
.head{
    width: 100%;
    height: 2.05rem;
    background-color:#FFD101 ;
    box-sizing: border-box;
    padding: 0.25rem 0.1rem 0 0.1rem ;
}
.head-top{
    width: 50%;
    height:0.9rem;
    float: right;
   
}
.head-top>ul{
    display: flex;
    justify-content: flex-end;
}
.head-top>ul>li{
    margin-left: 0.2rem;
}
.head-center{
    width: 50%;
    height:0.9rem;
    float: left;
    text-align:left;
    
   
}
.head-center>ul{
    height: 100%;
    width: 100%;
 display: flex;
    justify-content: flex-start;
   align-items: center;
}
.head-center>ul>li{
    font-size: 0.18rem;
    font-weight: 600;
}
.head-center>ul>li:nth-of-type(1)>span{
    display: block;
    margin-right: 0.2rem;
    width: 0.5rem;
    height: 0.5rem;
    background-color:white;
    border-radius: 50%;
    overflow: hidden;
}
.head-bottom{
    width: 100%;
    height: 0.8rem;
}
.iconfont2{
    font-size: 0.2rem;
    
}
/* con */
.con{
    width: 100%;
    background-color:#F4F4F4;
}
/* nav */
.nav{
    width: 3.5rem;
    height: 1.25rem;
    background-color: white;
    border-radius: 0.3rem;
    margin: auto;
    margin-top: -0.2rem;
    box-sizing: border-box;
    padding: 0 0.2rem;
}

.nav-top{
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
    display: flex;
    justify-content: space-between;
}
.nav-top>span:nth-of-type(1){
    font-size: 0.15rem;
    font-weight: 600;
    
}
.nav-top>span:nth-of-type(2){
   color:#A6A6A6 ;
    
}
.nav-bot{
    width: 100%;
    height: 0.6rem;
    color:#FE9003;
}
.nav-bot>ul>li{
    background-color: red;
 color: black;
}
/* money */
.money{
     width: 3.5rem;
    height: 1.35rem;
    background-color: white;
    border-radius: 0.3rem;
    margin: auto;
    margin-top: 0.2rem;
    box-sizing: border-box;
    padding: 0 0.2rem;
}
.money-top{
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
    display: flex;
    justify-content: space-between;
}
.money-top>span:nth-of-type(1){
    font-size: 0.15rem;
    font-weight: 600;
    
}
.money-top>span:nth-of-type(2){
   color:#A6A6A6 ;
    
}
.money-bot{
    width: 100%;
    height: 0.8rem;
}
.money-bot>ul{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
}
.money-bot>ul>li{
    flex: 1;
    text-align: center;
}
.money-bot>ul>li>h3{
    line-height: 0.3rem;
}
.money-bot>ul>li>span{
    line-height: 0.2rem;
}
.img-1{
    width: 3.5rem;
    height: 0.8rem;
    margin:  0.2rem auto 0 auto;
  
}
.img-1>img{
    
    width: 100%;
    height: 100%;
}

/* game */
.game{
    width: 3.5rem;
    height: 1.2rem;
    background-color: white;
    border-radius: 0.3rem;
    margin: auto;
  
    box-sizing: border-box;
    padding: 0 0.2rem;
    margin-top:0.2rem;
}
.game-bot{
    width: 100%;
    height: 0.7rem;
    overflow: hidden;
}
/* list */
.myself-list{
    width: 3.5rem;
    margin: auto;
    
}
</style>